<template>
        <div class="table">
                <advance-table
                        :columns="columns"
                        :data-source="dataSource"
                        title="高级表格-Beta"
                        :loading="loading"
                        rowKey="id"
                        @search="onSearch"
                        @refresh="onRefresh"
                        :format-conditions="true"
                        @reset="onReset"
                        :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }"
                >
                        <template slot="statusTitle">
                                状态
                                <a-icon style="margin: 0 4px" type="info-circle"/>
                        </template>
                        <template slot="send" slot-scope="{text}">
                                {{text ? '是' : '否'}}
                        </template>
                        <template slot="status" slot-scope="{text}">
                                {{text | statusStr}}
                        </template>
                </advance-table>
                <api/>
        </div>
</template>

<script>
        import AdvanceTable from '@/components/table/advance/AdvanceTable'
        import {dataSource as ds} from '@/services'
        import Api from '@/pages/components/table/Api'

        export default {
                name: 'Table',
                components: {Api, AdvanceTable},
                filters: {
                        statusStr(val) {
                                switch (val) {
                                        case 1:
                                                return '已下单'
                                        case 2:
                                                return '已付款'
                                        case 3:
                                                return '已审核'
                                        case 4:
                                                return '已发货'
                                }
                        }
                },
                data() {
                        return {
                                loading: false,
                                page: 1,
                                pageSize: 10,
                                total: 0,
                                columns: [
                                        {
                                                title: '商品名称',
                                                dataIndex: 'name',
                                                searchAble: true
                                        },
                                        {
                                                title: '订单号',
                                                dataIndex: 'orderId'
                                        },
                                        {
                                                searchAble: true,
                                                dataIndex: 'status',
                                                dataType: 'select',
                                                slots: {title: 'statusTitle'},
                                                scopedSlots: {customRender: 'status'},
                                                search: {
                                                        selectOptions: [
                                                                {title: '已下单', value: 1},
                                                                {title: '已付款', value: 2},
                                                                {title: '已审核', value: 3},
                                                                {title: '已发货', value: 4}
                                                        ]
                                                }
                                        },
                                        {
                                                title: '发货',
                                                searchAble: true,
                                                dataIndex: 'send',
                                                dataType: 'boolean',
                                                scopedSlots: {customRender: 'send'},
                                                search: {
                                                        switchOptions: {
                                                                checkedText: '开',
                                                                uncheckedText: '关'
                                                        }
                                                }
                                        },
                                        {
                                                title: '审核时间',
                                                dataIndex: 'auditTime',
                                                dataType: 'time',
                                        }
                                ],
                                dataSource: [],
                                conditions: {}
                        }
                },
                created() {
                        this.getGoodList()
                        this.getColumns()
                },
                methods: {
                        getGoodList() {
                                this.loading = true
                                const {page, pageSize, conditions} = this
                                ds.goodsList({page, pageSize, ...conditions}).then(result => {
                                        const {list, page, pageSize, total} = result.data.data
                                        this.dataSource = list
                                        this.page = page
                                        this.total = total
                                        this.pageSize = pageSize
                                        this.loading = false
                                })
                        },
                        getColumns() {
                                ds.goodsColumns().then(res => {
                                        this.columns = res.data
                                })
                        },
                        onSearch(conditions, searchOptions) {
                                console.log(searchOptions)
                                this.page = 1
                                this.conditions = conditions
                                this.getGoodList()
                        },
                        onSizeChange(current, size) {
                                this.page = 1
                                this.pageSize = size
                                this.getGoodList()
                        },
                        onRefresh(conditions) {
                                this.conditions = conditions
                                this.getGoodList()
                        },
                        onReset(conditions) {
                                this.conditions = conditions
                                this.getGoodList()
                        },
                        onPageChange(page, pageSize) {
                                this.page = page
                                this.pageSize = pageSize
                                this.getGoodList()
                        }
                }
        }
</script>

<style scoped lang="less">
        .table {
                background-color: @base-bg-color;
                padding: 24px;
        }
</style>